<template>
  <view>
    <!-- 悬浮球 -->
    <view
      class="movable-box"
      :style="{
        width: movableStyle.width + 'px',
        height: movableStyle.height + 'px',
        top: ballTop + 'px',
        right: ballRight + 'px',
      }"
      @click="onClick"
      @touchstart="onTouchStart"
      @touchend="onTouchEnd"
      @touchmove.stop="onTouchMove"
    >
      <img src="../../static/logo.png" class="logo" alt="" />
    </view>
    <!-- 功能球 -->
    <view
      class="ball"
      v-for="(ball, index) in copyBalls"
      :key="index"
      :style="ball?.style"
      @click="ballClick(ball)"
    >
      <div
        class="ball-content"
        :style="{
          width: movableStyle.width - 10 + 'px',
          height: movableStyle.height - 10 + 'px',
        }"
      >
        <slot :name="ball.slotName"></slot>
      </div>
    </view>
  </view>
  <up-toast ref="uToastRef"></up-toast>
  <up-modal :show="show"  title="问题反馈" showCancelButton @confirm="onConfirm" @cancel="onCancel">
    <up-textarea v-model="feedbackVal" placeholder="欢迎您提出宝贵的建议!" count ></up-textarea>
  </up-modal>
</template>

<script setup>
import { ref, onMounted } from "vue";
const props = defineProps({
  movableStyle: {
    type: Object,
    default: {
      width: 40,
      height: 40,
      top: 300,
      right: 0,
    },
  },
  /**
		 * 示例
		 * angle: 角度
		 * style：初始样式
		 * slotName：插槽名称
		 * [
			{ angle: 0, style:{ right:0, top:0, width:0, height:0, opacity:0}, slotName:'slot0' },
			{ angle: 0, style:{ right:0, top:0, width:0, height:0, opacity:0}, slotName:'slot1' },
			{ angle: 0, style:{ right:0, top:0, width:0, height:0, opacity:0}, slotName:'slot2' },
			]
		 * **/
  balls: {
    type: Array,
    default: () => [],
  },
});

const uToastRef = ref()
const show = ref(false)
const feedbackVal = ref('');
const isMove = ref(true);
const emit = defineEmits(["update:movableStyle"]);
let startX = ref(0);
let startY = ref(0);
let ballTop = ref(props.movableStyle.top);
let ballRight = ref(props.movableStyle.right);
let copyBalls = ref([]);
onMounted(() => {
  copyBalls.value = props.balls;
  setBalls(false);
});

const onTouchStart = (event) => {
  startX.value = event.touches[0].clientX;
  startY.value = event.touches[0].clientY;
  event.preventDefault();
};
// 手指离开屏幕
const onTouchEnd = () => {
  emit("update:movableStyle", {
    width: props.movableStyle.width,
    height: props.movableStyle.height,
    top: ballTop.value,
    right: ballRight.value,
  });
};
// 点击事件
const onClick = (event) => {
  if (copyBalls.value.length !== 0) {
    isMove.value = !isMove.value;
    if (isMove.value) {
      setBalls(false);
    } else {
      updateBallsPosition();
    }
  }
  event.preventDefault();
};
// 拖拽
const onTouchMove = (event) => {
  isMove.value = true;
  const newRight = ballRight.value - event.touches[0].clientX + startX.value;
  const newTop = ballTop.value + event.touches[0].clientY - startY.value;
  const query = uni.createSelectorQuery();
  query.selectViewport().boundingClientRect();
  query.exec((res) => {
    const maxX = res[0].width - props.movableStyle.width;
    const maxY = res[0].height - props.movableStyle.height;
    ballRight.value = Math.max(0, Math.min(newRight, maxX));
    ballTop.value = Math.max(0, Math.min(newTop, maxY));
  });
  startX.value = event.touches[0].clientX;
  startY.value = event.touches[0].clientY;
  setBalls(false);
};
// 初始化功能球
const setBalls = (isShow) => {
  let angles = [45, 0, -45];
  copyBalls.value.forEach((item, i) => {
    item.style.top = ballTop.value + 5 + "px";
    item.style.right = ballRight.value + 5 + "px";
    item.style.width = props.movableStyle.width - 10 + "px";
    item.style.height = props.movableStyle.height - 10 + "px";
    item.angle = angles[i];
    item.slotName = item.slotName;
    item.style.opacity = isShow ? 1 : 0;
  });
};
// 功能球位置更新
const updateBallsPosition = () => {
  const isRight = ballRight.value < wx.getSystemInfoSync().windowWidth / 2;
  copyBalls.value.forEach((ball) => {
    const offsetX = 50 * Math.cos((ball.angle * Math.PI) / 180);
    const offsetY = 50 * Math.sin((ball.angle * Math.PI) / 180);
    ball.style.top = Math.floor(ballTop.value - offsetY) + 5 + "px";
    ball.style.right =
      Math.floor(
        isRight ? ballRight.value + offsetX : ballRight.value - offsetX
      ) +
      5 +
      "px";
    ball.slotName = ball.slotName;
    ball.style.opacity = 1;
  });
};
// 功能球点击
const ballClick = (item) => {
  isMove.value = !isMove.value;
  setBalls(false);
  if(item?.feedback){
    show.value = true
  }else{
    item?.fn();
  }
};

const onConfirm = () => {
  if(feedbackVal.value){
    feedbackVal.value = ''
    uToastRef.value.show({  
    type:'success',  
    message: "我们会尽快处理您的反馈!",
    iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png' 
  });  
  }else{
      
  }
  show.value = false
}
const onCancel = () => {
  feedbackVal.value = ''
  show.value = false
}
</script>

<style lang="scss" scoped>
.movable-box {
  position: fixed;
  top: 70%;
  right: 0;
  z-index: 9999;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.904);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  .logo {
    width: 80%;
    height: 85%;
  }
}
.ball {
  position: absolute;
  border-radius: 50%;
  transition: all 0.5s;
  .ball-content {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 50%;
  }
}
</style>
